<template>
  <div>
    <div class="his-hot" v-show="isShowHistory">
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon name="delete-o" @click="deleteHisrory" />
      </div>
      <div class="bd">
        <van-tag v-for="(item,index) in historyListData" :key="index" plain
                 @click="tagClick(item)" type="default">{{item}}</van-tag>
      </div>
    </div>

    <div class="his-hot">
      <div class="hd">
        <h4>热门搜索</h4>
      </div>
      <div class="bd">
        <van-tag v-for="(item,index) in hotdSearchData" :key="index" plain type="default"
                 @click="tagClick(item.keyword)" :class="item.is_hot?'red':''">{{item.keyword}}</van-tag>
      </div>
    </div>

  </div>
</template>

<script>
import { deleteHistory } from '@/request/api'

export default {
  name: 'HistorySearch',
  props:["historyListData","hotdSearchData"],
  data () {
    return {
      isShowHistory:true,       //历史记录内容，是否可见

    }
  },
  created () {

  },
  computed: {},
  methods: {
    // 点击历史记录和热门搜索，进行搜索
    tagClick(val){
      this.$emit('tagClick',val)
    },
    deleteHisrory(){
      deleteHistory().then(res=>{
        this.$toast.success('删除成功');
        setTimeout(()=>{
          // 删除成功后，隐藏历史记录内容
          this.isShowHistory=false
          },1000)

      })
    }
  }
}
</script>

<style lang = "less" scoped>
.his-hot{
  background-color: #fff;
  padding:.1rem;
  margin-bottom: .2rem;


  .hd{
    display: flex;
    justify-content: space-between;
    font-size:.24rem;


    h4{ font-size:.20rem;}
  }

  .bd{
    line-height: .3rem;
  }

  .van-tag{


    margin-right: .05rem;
    padding: .03rem;

  }
  .red{
    color:darkred
  }
}
</style>
